<template>
  <div v-if="postDetail">
    <div class="normalPost" v-if="postDetail.type==1">
      <div class="header2">
        <span class="iconfont iconjiantou2"></span>
        <span class="iconfont iconnew"></span>
        <button
          :class="{hasFollow:postDetail.has_follow}"
          @click="toggleFollow"
        >{{postDetail.has_follow?'已关注':'关注'}}</button>
      </div>
      <div class="title">{{postDetail.title}}</div>
      <div class="info">{{postDetail.user.nickname}} {{postDetail.create_date.split('T')[0]}}</div>
      <div class="content" v-html="postDetail.content"></div>
    </div>
    <div class="videoPost" v-if="postDetail.type==2">
      <video
        controls
        muted
        poster="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587755938102&di=2f9a3238682790b5df199a2c8ee0f747&imgtype=0&src=http%3A%2F%2Fimg.tukexw.com%2Fimg%2F6e79b562dbad4f66.jpg"
        src="https://video.pearvideo.com/mp4/third/20200421/cont-1670075-11742488-090329-hd.mp4"
      ></video>
      <div class="info">
        <img
          v-if="postDetail.user.head_img"
          :src="$axios.defaults.baseURL+postDetail.user.head_img"
          alt
        />
        <img v-else src="@/assets/logo.png" alt />
        <div class="username">{{postDetail.user.nickname}}</div>
        <!-- <div class="follow">关注</div> -->
        <button
          :class="{hasFollow:postDetail.has_follow}"
          @click="toggleFollow"
        >{{postDetail.has_follow?'已关注':'关注'}}</button>
      </div>
      <div class="title">{{postDetail.title}}</div>
    </div>
    <div class="btnsWrapper">
      <div class="dianzan" @click="toggleLike" :class="{haslike:postDetail.has_like}">
        <span class="iconfont icondianzan">
          <span class="sz">{{postDetail.like_length}}</span>
        </span>
      </div>
      <div class="weixin">
        <span class="iconfont iconweixin">
          <span class="wx">微信</span>
        </span>
      </div>
    </div>
    <h2 class="comment">精彩跟帖</h2>
    <!-- 遍历评论数组,显示评论组件 -->
    <Comment
      :commentData="item"
      v-for="(item,index) in commentList"
      :key="index"
      @callReply="callReply"
    />
    <div class="moreComment">
      <div
        class="btn"
        @click="$router.push({
        path:'/morecomment?id='+$route.query.id
      })"
      >更多跟帖</div>
    </div>
    <CommentInput
      :postId="$route.query.id"
      :parentId="commentId"
      @reloadComment="reloadComment"
      ref="commentInput"
    />
  </div>
</template>

<script>
import Comment from "@/components/comment/index";
import CommentInput from "@/components/comment/CommentInput";
export default {
  components: {
    Comment,
    CommentInput
  },
  data() {
    return {
      postDetail: null,
      commentList: [],
      commentId: ""
    };
  },
  mounted() {
    // this.$axios({
    //   url: "/post/" + this.$route.query.id,
    //   method: "GET"
    // }).then(res => {
    //   console.log(res.data);
    //   this.postDetail = res.data.data;
    // });
    this.loadPost();
    this.loadComment();
  },
  methods: {
    loadPost() {
      this.$axios({
        url: "/post/" + this.$route.query.id,
        method: "GET"
      }).then(res => {
        console.log(res.data);
        this.postDetail = res.data.data;
      });
    },
    loadComment() {
      this.$axios({
        url: "/post_comment/" + this.$route.query.id,
        method: "GET"
      }).then(res => {
        console.log(res.data);
        if (res.data.data.length > 3) {
          res.data.data.length = 3;
        }
        this.commentList = res.data.data;
      });
    },
    reloadComment() {
      this.loadComment();
      //每次发表成功,除了读取评论数据,还要清理之前的commentId回复评论文章的操作
      this.commentId = "";
    },
    toggleFollow() {
      if (this.postDetail.has_follow) {
        this.$axios({
          url: "/user_unfollow/" + this.postDetail.user.id,
          method: "GET"
        }).then(res => {
          console.log(res.data);
          if (res.data.message == "取消关注成功") {
            this.postDetail.has_follow = false;
            this.$toast("取关成功");
          }
        });
      } else {
        this.$axios({
          url: "/user_follows/" + this.postDetail.user.id,
          method: "GET"
        }).then(res => {
          console.log(res.data);
          if (res.data.message == "关注成功") {
            this.postDetail.has_follow = true;
            this.$toast("关注成功");
          }
        });
      }
    },
    toggleLike() {
      this.$axios({
        url: "/post_like/" + this.postDetail.id,
        method: "GET"
      }).then(res => {
        console.log(res.data);
        if (res.data.message == "点赞成功") {
          this.postDetail.like_length += 1;
          this.postDetail.has_like = true;
        } else if (res.data.message == "取消成功") {
          this.postDetail.like_length -= 1;
          this.postDetail.has_like = false;
        }
      });
    },
    callReply(commentId) {
      console.log("触发回复事件,带上评论子组件id,先存放在父组件");
      console.log(commentId);
      this.commentId = commentId;
      //触发输入框子组件
      this.$refs.commentInput.showTextarea();
    }
  }
};
</script>

<style lang='less' scoped>
.header2 {
  display: flex;
  padding: 0 2.778vw;
  align-items: center;
  .iconjiantou2 {
    font-size: 6.944vw;
  }
  .iconnew {
    font-size: 19.444vw;
    flex: 1;
  }
  button {
    border: 0;
    border: 1px solid #e1e1e1;
    padding: 0.833vw 3.611vw;
    border-radius: 3.333vw;
    background-color: #ff1c01;
  }
  .hasFollow {
    background-color: transparent;
    color: #888;
  }
}
.title {
  padding-left: 4.167vw;
  font-size: 5.556vw;
  color: #333333;
}
.info {
  font-size: 3.611vw;
  padding-left: 4.167vw;
  color: #999999;
  margin: 1.389vw 0;
}
.content {
  /deep/ img {
    max-width: 100%;
  }
}
.btnsWrapper {
  display: flex;
  justify-content: space-around;
  margin-top: 8.333vw;
  border-bottom: 1.389vw solid #e4e4e4;
  .dianzan {
    color: #595959;
    border: 1px solid #979797;
    border-radius: 2.778vw;
    padding: 0.833vw 0;
    margin-bottom: 5.556vw;
    &.haslike {
      color: red;
      border: 1px solid red;
    }
    .icondianzan {
      padding: 1.667vw 2.778vw;
      .sz {
        padding: 0 1.689vw;
      }
    }
  }
  .weixin {
    .iconweixin {
      border: 1px solid #979797;
      padding: 1.667vw 2.778vw;
      border-radius: 2.778vw;
      color: green;
      .wx {
        padding: 0 1.389vw;
        color: #595959;
      }
    }
  }
}
video {
  width: 100%;
}
.info {
  display: flex;
  align-items: center;
  margin-bottom: 4.167vw;
  img {
    width: 6.944vw;
    height: 6.944vw;
  }
  .username {
    flex: 1;
    padding-left: 2.778vw;
  }
  button {
    border: 0;
    border: 1px solid #dfdfdf;
    padding: 0.833vw 3.333vw;
    border-radius: 2.778vw;
    margin-right: 4.167vw;
    background-color: #ff1700;
    color: #fff;
  }
  .hasFollow {
    background-color: transparent;
    color: #888;
  }
}
.comment {
  font-size: 5.556vw;
  font-weight: normal;
  text-align: center;
  padding-top: 6.667vw;
}
.moreComment {
  height: 22.222vw;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .btn {
    padding: 0 5vw;
    height: 8.333vw;
    line-height: 8.333vw;
    font-size: 3.889vw;
    border-radius: 4.167vw;
    border: 1px solid #666;
  }
}
</style>